<template>
  <div class="page" style="text-align:left;">
  		<h2>所在页面位置：{{pagename}}</h2>
		<p>参数介绍：</p>
		<p>current（必须设置属性，设置当前页）</p>
		<p>pageCount（必须设置属性，设置共多少页）</p>
		<p>totalData（必须设置属性，设置共多少条记录）</p>
		<p>count（设置值必须大于1，否则按照2使用）</p>
		<p>其他参数可不设置，不设置按照隐藏处理</p>
		<p>分页采用ajax+组件属性传值修改的处理方式，基本属性的设置值都来自ajax返回内容</p>
  		<p>分页样式组件可随意修改</p>
		<p>简单配置使用：</p>
		<p>main.js:</p>
		<div>
			
			<textarea style="background:#000;color:#fff;width:800px;height:100px;">
			
				//注册组件
				import divuePagination from './divuePagination.vue'
				Vue.component('divue-pagination', divuePagination)
			</textarea>
		
		</div>
		<p>某个vue组件，使用分页：template位置</p>
		<div>
			
			<textarea style="background:#000;color:#fff;width:800px;height:250px;">
			
				<divue-pagination 
					:current="current" 
					:count="count" 
					:pageCount="pageCount" 
					:showPageNum="showPageNum" 
					:showPageCount="showPageCount" 
					:totalData="totalData" 
					:showTotalData="showTotalData" 
					:nextPage="nextPage" 
					:coping="coping" 
					:showSkipPage="showSkipPage" 
					@runAjax="runAjax">
				</divue-pagination>
			</textarea>
		
		</div>
		<p>不管是在组件的data中还是computed中，只要返回必要属性设置到分页组件即可！</p>
		<p>runAjax属性设置的是发送请求获取数据，在当前组件定义的方法，分页组件会自动$emit这个绑定的方法，所以这个runAjax你可以随意书写！</p>
		<p>哪些属性是必须的，哪些可以忽略，哪些有默认值：</p>
		current:1,               //存放返回当前第几页<br />
		count:2,                          //当前页前后页数    (默认：2)<br />
		pageCount:"",            //存放返回总页数<br />
		showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）<br />
		showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br />
		totalData:"",            //存放返回数据总条数<br />
		showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br />
		nextPage:false,                   //是否有下一页<br />
		coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br />
		showSkipPage:1              //是否显示跳页功能（默认值：1-显示 其他-不显示）<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />

		
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
		pagename:"使用说明"
	}
  }
}
</script>

<style>
	h3{text-align:left;}
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>
